<template>
  <div class="warp">
    <div class="topBar" :class="{ hide: isShow }">
      <el-icon class="topBar__switch" @click="switchMenu"><Grid /></el-icon>
      {{ address }}
    </div>
    <nav class="menu-container" v-if="isShow">
      <RouterLink v-for="item in items" :key="item.link" :to="{ name: item.name }" active-class="selected" ref="routerLinkDom">
        <div class="icon">
          <Icon :type="item.icon" />
        </div>
        <span>{{ item.title }}</span>
      </RouterLink>
      <el-icon class="menu-container__switch" @click="switchMenu"><ArrowUpBold /></el-icon>
    </nav>
  </div>
</template>

<script setup>
import { getIpAddress } from '@/api/visitor.ts'
import { ref, nextTick, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const routerLinkDom = ref(null)
const activeDom = ref(null)
const isShow = ref(false)
const items = ref([
  {
    name: 'Home',
    title: '首页',
    icon: 'home'
  },
  {
    name: 'Blog',
    title: '文章',
    icon: 'blog'
  },
  {
    name: 'About',
    title: '关于我',
    icon: 'about'
  },
  {
    name: 'Project',
    title: '项目&效果',
    icon: 'code'
  },
  {
    name: 'Message',
    title: '留言板',
    icon: 'chat'
  }
])
const address = ref('')
const switchMenu = () => {
  isShow.value = !isShow.value
  changeActiveDom(router.currentRoute.value)
}
onMounted(async () => {
  let { result } = await getIpAddress()
  address.value = result.ad_info.province + result.ad_info.city + result.ad_info.district
})
//改变选择状态
async function changeActiveDom(newValue) {
  await nextTick()
  if (routerLinkDom.value) {
    activeDom.value = routerLinkDom.value.filter((item) => item.to.name == 'Blog')
    //判断路由中是否包含/article，包含就是激活状态
    if (newValue.fullPath.includes('/Oarticle')) {
      activeDom.value[0].$el.classList.add('selected')
    } else {
      if (activeDom.value) {
        activeDom.value[0].$el.classList.remove('selected')
      }
    }
  }
}
// 监听当前路由
watch(
  () => router.currentRoute.value,
  async (newValue) => {
    isShow.value = false
    changeActiveDom(newValue)
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
.warp {
  .topBar {
    height: 35px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    justify-content: space-between;
    .topBar__switch {
      font-size: 30px;
      margin: 30px;
      padding: 5px 0;
      color: #000;
    }
  }
  .hide {
    display: none;
  }
}
.menu-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: $gray;
  padding-top: 15px;
  a {
    padding-left: 30px;
    width: 20%;
    &.selected {
      // background: darken($words, 3%);
      color: #1e80ff;
    }
    span {
      padding-left: 20px;
      white-space: nowrap;
    }
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    color: #666;
    &:hover {
      color: #1e80ff;
      background-color: rgba(255, 255, 255, 0.4);
    }
  }
  .menu-container__switch {
    font-size: 20px;
    padding: 5px 0;
    padding-left: 30px;
    color: #000;
  }
}
</style>
